import React, { useEffect, useState } from 'react';
import { RouteComponentProps, Link } from 'react-router-dom';
import moment from 'moment';
import './index.css';

interface IRouteInfo {
  username: string;
}

interface IProps extends RouteComponentProps<IRouteInfo> {}

// 初始化作者信息
const initialUser: IUser = {
  loginname: 'string',
  avatar_url: 'string',
  githubUsername: 'string',
  create_at: Date.now().toString(),
  score: 0,
  recent_topics: [
    {
      id: '009',
      author: {
        loginname: 'string',
        avatar_url: 'string',
      },
      title: 'string',
      last_reply_at: Date.now().toString(),
    },
  ],
  recent_replies: [
    {
      id: '010',
      author: {
        loginname: 'string',
        avatar_url: 'string',
      },
      title: 'string',
      last_reply_at: Date.now().toString(),
    },
  ],
};

const User: React.FunctionComponent<IProps> = (props) => {
  const { username } = props.match.params;
  const [user, setUser] = useState<IUser>(initialUser);

  // 获取用户信息
  const getUserInfo = async () => {
    if (username == null) {
      return;
    }
    const response = await fetch(`https://cnodejs.org/api/v1/user/${username}`);
    const { data } = await response.json();

    setUser(data);
  };

  useEffect(() => {
    getUserInfo();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [username]);

  return (
    <div className="user">
      <div className="user-info">
        <p>
          <img src={user.avatar_url} alt={user.loginname} />
          <span>{user.loginname}</span>
        </p>
        <p>
          GITHUB:{' '}
          <a href={`https://github.com/${user.githubUsername}`}>
            {user.githubUsername}
          </a>
        </p>
        <p>注册时间: {moment(user.create_at).format('YYYY-MM-DD')}</p>
      </div>
      <div className="recent-topics">
        <span className="title">最近发布的帖子</span>
        <ul>
          {user.recent_topics.map((item, index) => {
            return (
              <li key={item.id}>
                <span>
                  <Link to={`/user/${item.author.loginname}`}>
                    <img
                      src={item.author.avatar_url}
                      alt={item.author.loginname}
                    />
                  </Link>
                  <Link to={`/topic/${item.id}`}>{item.title}</Link>
                </span>
                <span>{moment(item.last_reply_at).format('YYYY-MM-DD')}</span>
              </li>
            );
          })}
        </ul>
      </div>
      <div className="recent-replies">
        <span className="title">最近回复的帖子</span>
        <ul>
          {user.recent_replies.map((item, index) => {
            return (
              <li key={item.id}>
                <span>
                  <Link to={`/user/${item.author.loginname}`}>
                    <img
                      src={item.author.avatar_url}
                      alt={item.author.loginname}
                    />
                  </Link>
                  <Link to={`/topic/${item.id}`}>{item.title}</Link>
                </span>
                <span>{moment(item.last_reply_at).format('YYYY-MM-DD')}</span>
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
};

export default User;
